


import { useState } from "react";
import { Pagination, Table, Tooltip } from 'antd';
import classNames from 'classnames';
import styles from './index.module.scss'
import vector from "@/assets/images/discover/open-data/vector.png"
import publicImg from "@/assets/images/discover/open-data/public.png"
import unpublic from "@/assets/images/discover/open-data/unpublic.png"
import computable from "@/assets/images/discover/open-data/computable.png"
import { EyeOutlined, StarOutlined } from '@ant-design/icons';

// import model from "@/assets/images/discover/open-data/model.png"
// import container from "@/assets/images/discover/open-data/container.png"
// import grid from "@/assets/images/discover/open-data/grid.png"
// import tabular from "@/assets/images/discover/open-data/tabular.png"

const DiscoverData = () => {
	const [params, setparams] = useState({
		pageNum: 1,
		pageSize: 10,
	});
	const columns = [
		{
			title: '',
			key: 'icon_bar',
			width: 100,
			render: (text, record, index) => (
				<div className={styles.iconBox}>
					<Tooltip title={record.type}>
						<img src={vector} />
					</Tooltip>
					<Tooltip title={record.isPublick ? 'Public' : 'Not public'}>
						<img src={record.isPublick ? publicImg : unpublic} />
					</Tooltip>
					{record.iscomputable &&
						<Tooltip title={"Computable"}>
							<img src={computable} />
						</Tooltip>
					}
				</div>
			),
		},
		{
			title: 'Title',
			dataIndex: 'a',
			key: 'title',
			width: 330,
			render: (text, record, index) => (
				<Tooltip title={record.des}>
					<a target="_blank" href={'open-data/detail?id=' + record.id}>{text}</a>
				</Tooltip>
			),
		},
		{
			title: 'First Author',
			dataIndex: 'b',
			key: 'company',
			width: 100,
		},
		{
			title: 'Date Created',
			dataIndex: 'c',
			key: 'abnormal_type',
			width: 100,
		},
		{
			title: 'Last Modifiled',
			dataIndex: 'd',
			key: 'event_desc',
			width: 100,
		},
		{
			title: 'Populartity',
			key: 'company',
			width: 120,
			render: (text, record) => (
				<div className={styles.popularBox}>
					<Tooltip title={"Views " + record.e}>
						<EyeOutlined style={{ color: "#62c92f", fontSize: "16px" }} />
						<span>{record.e}</span>
					</Tooltip>

					<Tooltip title={"Collections " + record.f}>
						<StarOutlined style={{ color: "#d62293", fontSize: "16px" }} />
						<span>{record.f}</span>
					</Tooltip>
				</div>
			),
		},
	];
	const dataSource = [
		{
			isPublick: true,
			iscomputable: true,
			type: "Raster",
			a: 'Logan River Observatory: Logan River near Tony Grove Aquatic Site (LR_TG_BA) Raw Data',
			b: 'Logan River Observatory',
			c: "2019-07-30",
			d: "2019-08-30",
			e: 100,
			f: 20,
			id: 1,
			des: "我是一段很长的描述，我是一段很长的描述，我是一段很长的描述，我是一段很长的描述，我是一段很长的描述，我是一段很长的描述，我是一段"
		},
		{
			isPublick: false,
			iscomputable: false,
			type: "Tabular",
			id: 2,
			a: 'Logan River Observatory: Logan River near Tony Grove Aquatic Site (LR_TG_BA) Raw Data',
			b: 'Logan River Observatory',
			c: "2019-07-30",
			d: "2019-08-30",
			e: 10000,
			f: 2000,
			des: "我是一段很长的描述，我是一段很长的描述，我是一段很长的描述，我是一段很长的描述，我是一段很长的描述，我是一段很长的描述，我是一段"
		}
	];
	return (
		<div className={classNames(styles.discoverDataBox)}>
			<Table
				size="small"
				scroll={{ y: "1400px" }}
				pagination={false}
				dataSource={dataSource}
				columns={columns} />
			<Pagination
				align="end"
				current={params.pageNum}
				pageSize={params.pageSize}
				total={1000}
				showSizeChanger={false}
				onChange={(page, pageSize) => {
					setparams({
						...params,
						pageNum: page,
						pageSize: pageSize,
					});
				}}
			/>
		</div>
	)
}
export default DiscoverData;